/**
 * 专业技能
 */
import React from 'react';
import { Form, Input, Button, Icon, InputNumber } from 'antd';
import { FormHeader, FormLayout, BoxRemove } from '../../components';
import { requireRule } from './util';
import { SelectDegree } from '../select';

const KEY = 'skill';

function Item({ form, onRemove, index }) {
    const { getFieldDecorator } = form;
    return (
        <BoxRemove onRemove={onRemove}>
            <FormLayout type="col2">
                <Form.Item label="技能">
                    {getFieldDecorator(`${KEY}SkillName[${index}]`, { rules: requireRule('请输入技能') })(
                        <Input placeholder="请输入" />
                    )}
                </Form.Item>
                <Form.Item label="使用时长">
                    <div style={{ display: 'flex', lineHeight: '40px', alignItems: 'center' }}>
                        {getFieldDecorator(`${KEY}SkillDuration[${index}]`, { rules: requireRule('请输入使用时长') })(
                            <InputNumber
                                min={0}
                                maxLength={10}
                                precision={0}
                                placeholder="请输入"
                                style={{ width: '100%' }}
                            />
                        )}
                        <span style={{ marginLeft: 8 }}>月</span>
                    </div>
                </Form.Item>
                <Form.Item label="掌握程度">
                    {getFieldDecorator(`${KEY}Proficiency[${index}]`, { rules: requireRule('请输入掌握程度') })(
                        <SelectDegree />
                    )}
                </Form.Item>
            </FormLayout>
        </BoxRemove>
    );
}

export default function ResumeSkill({ form }) {
    form.getFieldDecorator(`${KEY}Keys`, { initialValue: [] });

    const keys = form.getFieldValue(`${KEY}Keys`);

    const renderItems = () =>
        keys?.map(k => (
            <Item
                form={form}
                key={k}
                index={k}
                onRemove={() => {
                    form.setFieldsValue({
                        [`${KEY}Keys`]: keys.filter(key => key !== k)
                    });
                }}
            />
        ));

    return (
        <div style={{ marginBottom: 24 }}>
            <FormHeader title="专业技能" id={`resume-${KEY}`} />
            {renderItems()}
            <Button
                block
                onClick={() => {
                    const nextKeys = keys.concat(keys.length);
                    form.setFieldsValue({
                        [`${KEY}Keys`]: nextKeys
                    });
                }}
            >
                <Icon type="plus" />
                添加专业技能
            </Button>
        </div>
    );
}
